<template>
  <GdContainerWithBtns
    v-model:isShowContainer="bind_isShowContainer"
    :container-type="containerType"
    :container-attr="containerAttr"
    @do-operation="onDoOperation"
  >
    <template v-if="contentType === 'Table'">
      <SceneContainerTableForm v-bind="$attrs"></SceneContainerTableForm>
    </template>
    <template v-else>
      <SceneContainerForm v-bind="$attrs"></SceneContainerForm>
    </template>
  </GdContainerWithBtns>
</template>
<script>
export default {
  name: "ContainerTemplate",
  inheritAttrs: false,
};
</script>
<script setup>
import { ref, watch, computed } from "vue";
import GdContainerWithBtns from "@gd-accbuild-ui/gd-ui/gd-container-with-btns/gd-container-with-btns.vue";
import SceneContainerTableForm from "@gd-accbuild-ui/scene-container/scene-container-table-form/scene-container-table-form.vue";
import SceneContainerForm from "@gd-accbuild-ui/scene-container/scene-container-form/scene-container-form.vue";
const props = defineProps({
  containerType: {
    type: String,
    default: "Dialog",
  },
  isShowContainer: {
    type: Boolean,
    default: false,
  },
  containerAttr: {
    type: Object,
  },
  /////////
  contentType: {
    type: String,
    default: "Form",
    validator: (val) => {
      return ["Form", "Table"].includes(val);
    },
  },
});

const emits = defineEmits(["do-operation", "update:isShowContainer"]);

const bind_isShowContainer = computed({
  get() {
    return props.isShowContainer;
  },
  set(value) {
    emits("update:isShowContainer", value);
  },
});

const onDoOperation = (params) => {
  emits("do-operation", { eventFrom: "container", ...params });
};
</script>
